<script setup>
import { ref, watch } from 'vue'
import SvgIcon from '../../components/SvgIcon.vue'
import Button from '../Button/Button.vue'
//控制下拉框的显示和隐藏
const isVisible = ref(false)
const changeSlot = () => {
  isVisible.value = !isVisible.value
}
//发射事件
const emits = defineEmits(['search', 'input'])
//input的值
const model = defineModel()
watch(model, (newValue) => {
  emits('input', newValue)
})
</script>
<template>
  <div
    class="group relative inline-block rounded-3xl border-red-300 border-8 px-2 duration-300 hover:border-red-600 dark:border-red-700"
  >
    <!-- 搜索图标 -->
    <SvgIcon
      name="search"
      class="inline w-4 h-4 dark:fill-red-700"
      color="red"
    />
    <div class="inline-block w-10/12">
      <input
        type="text"
        class="inline-block dark:text-slate-200"
        @focus="changeSlot"
        @blur="changeSlot"
        v-model="model"
      />
    </div>
    <!-- button按钮 -->
    <Button
      icon="search"
      circle
      type="danger"
      class="opacity-0 group-hover:opacity-100 duration-500 absolute right-1 top-1"
      @click="emits('search', model)"
    />
    <!-- 下拉插槽 -->
    <transition name="fade">
      <div
        v-show="isVisible"
        class="p-4 absolute top left-1/2 -translate-x-1/2 border-red-300 w-11/12 bg-slate-100 z-40 rounded-md overflow-auto"
      >
        <slot> </slot>
      </div>
    </transition>
  </div>
</template>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-enter-to,
.fade-leave-from {
  opacity: 1; /* 最终状态：完全显示 */
}
</style>
